import React, { PureComponent } from 'react';
import {
  Card,
  Table,
  Divider,
  Tag,
  Popconfirm,
  Form,
  Row,
  Col,
  Button,
  Input,
  Cascader,
  Badge,
  Switch
} from 'antd';
import { Link } from 'dva/router'; //引入link跳转
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; //引入面包屑
import { connect } from 'dva';
import PeopleActionModal from './PeopleActionModal'; //修改模态框
import { exportExcel } from 'xlsx-oc'; //安装导出的xlsx依赖  npm i xlsx-oc --save
import styles from './People.less';
import axios from 'axios';

const FormItem = Form.Item;
const options = [];
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['关闭', '运行中', '已上线', '异常'];
@connect(({ people, loading }) => ({
  action: people.currentAction,
  actionLoading: loading.effects['people/getActionlist'],
}))
@Form.create()
export default class PeopleAction extends PureComponent {
  state = {
    visible: false,
    pageSize: 5,
    currentPage: 1,
    formValues: {},
    forbiddenValue:'true',
  };
  componentDidMount() {
    //查新闻列表
    const { dispatch } = this.props;
    dispatch({
      type: 'people/getActionlist',
    });
  }
   onChange=(checked)=>{
    console.log(`switch to ${checked}`);
  }
  deleteHandler = id => {
    //删除人员记录
    const { dispatch } = this.props;
    dispatch({
      type: 'people/removeaction',
      payload: id,
    });
  };
  editHandler = (id, values) => {
    //修改人员记录
    const { dispatch } = this.props;
    dispatch({
      type: 'people/actionUpdate',
      payload: { id, values },
    });
  };
  handleSearch = e => {
    //表单条件查询
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };
      this.setState({
        formValues: values,
      });
      dispatch({
        type: 'people/queryaction',
        payload: values,
      });
    });
  };
  handleFormReset = () => {
    //表单重置
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'people/queryaction',
      payload: {},
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { action, actionLoading } = this.props;
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 50,
        fixed: 'left',
        render: text => <a href="javascript:;">{text}</a>,
      },
      {
        title: '名字',
        dataIndex: 'name',
        key: 'name',
        width: 50,
        fixed: 'left',
      },
      {
        title: '手机号码',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '邮箱',
        key: 'email',
        dataIndex: 'email',
      },
      {
        title: '锁定',
        key: 'lock',
        dataIndex: 'lock',
      },
      {
        title: '注销',
        key: 'cancle',
        dataIndex: 'cancle',
      },
      {
        title: '禁用',
        dataIndex: 'forbidden',
        onFilter: (value, record) => record.forbidden.toString() === value,
        render(val) {
          return   <Switch checkedChildren="开" unCheckedChildren="关" 
          defaultChecked/>;
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        onFilter: (value, record) => record.status.toString() === value,
        render(val) {
          return <Badge status={statusMap[val]} text={status[val]} />;
        },
      },
      {
        title: '操作',
        key: 'action',
        width: 200,
        fixed: 'right',
        render: (text, record) => (
          <span>
            <Link to={'/people/peopleactiondetail/' + record.id}>查看{record.name}</Link>
            <Divider type="vertical" />
            <PeopleActionModal record={record} onOk={this.editHandler.bind(null, record.id)}>
              <a>修改</a>
            </PeopleActionModal>
            <Divider type="vertical" />
            <Popconfirm title="确定删除？" onConfirm={this.deleteHandler.bind(null, record.id)}>
              <a href="">删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
    return (
      <PageHeaderLayout
        title="读者用户权限操作"
        content="读者用户权限操作用于收集读者用户的实际操作信息，读者用户权限操作页是数据项基本的全面信息场景。"
      >
        <Card bordered={false}>
          <div
            className={styles.tableListForm}
            style={{ backgroundColor: '#EDF1F3', width: '100%' }}
          >
            <Form onSubmit={this.handleSearch} layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24} className={styles.tableListFormLable}>
                  <FormItem label="人员名字">
                    {getFieldDecorator('name')(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem label="手机号">
                    {getFieldDecorator('phone')(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem label="邮箱">
                    {getFieldDecorator('email')(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24} style={{ float: 'right' }}>
                  <span className={styles.submitButtons} style={{ float: 'right' }}>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ width: 82, height: 32, backgroundColor: '#1772c3' }}
                      onClick={this.handleSearch}
                    >
                      查询
                    </Button>
                    <Button
                      style={{ marginLeft: 20, width: 82, height: 32 }}
                      onClick={this.handleFormReset}
                    >
                      重置
                    </Button>
                  </span>
                </Col>
              </Row>
            </Form>
          </div>
          <div className={styles.tables} id="peoplelist">
            <Table
              columns={columns}
              dataSource={action}
              loading={actionLoading}
              pagination={{
                showSizeChanger: true,
                showQuickJumper: true,
                pageSize: 10, //每页5条数据
                total: action.total,
                showTotal: total => `共 ${total} 条数据`,
              }}
              rowKey="id" //设置唯一id
              scroll={{ x: 1300 }} //自然滚动
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
